<template>
  <div>
    <el-row>
      <el-col :span="8" :offset="7">
        <div id="table_aly"></div>
      </el-col>
    </el-row>
    <h2>话题分析</h2>
    <el-row>
      <el-col :span="12">
        <div id="compare1"></div>
      </el-col>
      <el-col :span="12">
        <div id="compare2"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { ref, computed, reactive, getCurrentInstance, onMounted } from "vue";
import {
  getWeiboAnalysis,
  getWeiboCount,
  getWeiboSearch,
  getWeiboTask,
} from "@/api";
import { useRouter } from "vue-router";
const router = useRouter();
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();
let echarts = reactive(globalProperties.$echarts);
let state = reactive({
  keyWordList: [],
  keyWord: "",
  compareList1: [],
  compareList2: {},
});
// defineOptions({
//   name: 'wbAnalysis',
// });
onMounted(() => {
  state.keyWord = router.currentRoute.value.query.keyWord;
  getWeiboAnalysis().then((res) => {
    if (res.status == "200" && res.data) {
      console.log(router.currentRoute.value.query);
      state.keyWordList = res.data.data;
      console.log(
        state.keyWordList.map((it) => ({ value: it.value, name: it.label }))
      );
      renderTableAly();
    }
  });
  getWeiboCount().then((res) => {
    if (res.status == "200" && res.data) {
      state.compareList1 = res.data.data;
      renderCompare1();
    }
  });
  getWeiboSearch().then((res) => {
    
    if (res.status == "200" && res.data) {
      state.compareList2 = res.data.data;
      console.log(state.compareList2, 33)
      renderCompare2();
    }
  });
});
const renderTableAly = () => {
  let chart = echarts.init(document.getElementById("table_aly"), "white");
  let options = {
    title: {
      text: `${state.keyWord}话题情感分析`,
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: "50%",
        data: state.keyWordList.map((it) => ({
          value: it.value,
          name: it.label,
        })),
        itemStyle: {
          normal: {
            color: function (colors) {
              var colorList = [
                "#fc8251",
                "#5470c6",
                // "#91cd77",
                // "#ef6567",
                // "#f9c956",
                // "#75bedc",
              ];
              return colorList[colors.dataIndex];
            },
          },
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  chart.setOption(options, true);
};
const renderCompare1 = () => {
  let chart = echarts.init(document.getElementById("compare1"), "white");
  let options = {
    title: {
      text: `各话题发帖数分析`,
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "",
        type: "pie",
        radius: "50%",
        data: state.compareList1.map((it) => ({
          value: it.value,
          name: it.label,
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  chart.setOption(options, true);
};
const renderCompare2 = () => {
  let chart = echarts.init(document.getElementById("compare2"), "white");
  let options = {
    title: {
      text: `各话题正负面情感分析`,
      left: "center",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      data: ["正面", "负面"],
      left: "left",
    },
    toolbox: {
      show: true,
      orient: "vertical",
      left: "right",
      top: "center",
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        magicType: { show: true, type: ["line", "bar", "stack"] },
        restore: { show: true },
        saveAsImage: { show: true },
      },
    },
    xAxis: [
      {
        type: "category",
        axisTick: { show: false },
        data: ["正面", "负面"],
      },
    ],
    yAxis: [
      {
        type: "value",
      },
    ],
    series: Object.keys(state.compareList2).map(it => ({
        name: it,
        type: "bar",
        barGap: 0,
        emphasis: {
          focus: "series",
        },
        data: state.compareList2[it].map(item => ({value: item.value,name: item.label})),
    })),
    // series: [
    //   {
    //     name: "正面",
    //     type: "bar",
    //     barGap: 0,

    //     emphasis: {
    //       focus: "series",
    //     },
    //     data: state.compareList2[Object.keys(state.compareList2)[0]],
    //   },
    //   {
    //     name: "负面",
    //     type: "bar",
    //     //   label: labelOption,
    //     emphasis: {
    //       focus: "series",
    //     },
    //     data: state.compareList2[Object.keys(state.compareList2)[1]],
    //     // data:[state.compareList2[Object.keys(state.compareList2)[0]][1],state.compareList2[Object.keys(state.compareList2)[1]][1]],
    //   },
    // ],
  };
  chart.setOption(options, true);
};
</script>
<style lang="scss" scoped>
#table_aly {
  width: 100%;
  height: 400px;
}
#compare1 {
  width: 100%;
  height: 400px;
}
#compare2 {
  width: 100%;
  height: 400px;
}
h2 {
  line-height: 40px;
  background: #cecece;
  color: #409eff;
  font-size: 20px;
}
</style>